// 后台页面二次元风格动画脚本

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 创建背景容器
    createBackgroundContainer();
    
    // 页面元素动画
    animatePageElements();
    
    // 创建漂浮的心形
    createFloatingHearts();
});

// 创建背景容器
function createBackgroundContainer() {
    const container = document.createElement('div');
    container.id = 'background-container';
    document.body.insertBefore(container, document.body.firstChild);
}

// 页面元素动画
function animatePageElements() {
    // 为页面元素添加入场动画
    const elements = document.querySelectorAll('.form-group, h1, h2, .ticket-table, .search-container');
    
    elements.forEach((element, index) => {
        // 初始状态
        element.style.opacity = '0';
        element.style.transform = 'translateY(20px)';
        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        
        // 延迟动画
        setTimeout(() => {
            element.style.opacity = '1';
            element.style.transform = 'translateY(0)';
        }, 100 + index * 100);
    });

    // 按钮脉动效果
    const buttons = document.querySelectorAll('button, .logout-btn, .smtp-btn, .view-btn');
    buttons.forEach(button => {
        button.addEventListener('mouseover', function() {
            this.style.transform = 'scale(1.05)';
            this.style.transition = 'transform 0.3s ease';
        });
        
        button.addEventListener('mouseout', function() {
            this.style.transform = 'scale(1)';
        });
    });
}

// 创建漂浮的心形
function createFloatingHearts() {
    // 随机生成心形
    function createHeart() {
        const heart = document.createElement('div');
        heart.className = 'floating-heart';
        
        // 心形SVG
        heart.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="30" height="30"><path d="M50,15 C30,15 15,30 15,50 C15,70 35,90 50,95 C65,90 85,70 85,50 C85,30 70,15 50,15 Z M50,30 C60,30 65,40 65,50 C65,60 60,70 50,75 C40,70 35,60 35,50 C35,40 40,30 50,30 Z" fill="' + getRandomColor() + '" /></svg>';
        
        // 随机位置
        heart.style.position = 'fixed';
        heart.style.left = Math.random() * 100 + 'vw';
        heart.style.top = '100vh';
        heart.style.opacity = Math.random() * 0.5 + 0.3;
        heart.style.zIndex = '-1';
        heart.style.pointerEvents = 'none';
        
        // 添加到页面
        document.body.appendChild(heart);
        
        // 动画
        const duration = Math.random() * 10 + 15;
        const delay = Math.random() * 5;
        
        setTimeout(() => {
            heart.style.transition = 'transform ' + duration + 's linear, opacity ' + (duration / 2) + 's ease-out';
            heart.style.transform = 'translateY(-110vh) rotate(' + Math.random() * 360 + 'deg)';
            heart.style.opacity = '0';
            
            // 移除元素
            setTimeout(() => {
                document.body.removeChild(heart);
            }, duration * 1000);
        }, delay * 1000);
    }
    
    // 随机颜色
    function getRandomColor() {
        const colors = ['#ff6b8b', '#8a5cf2', '#ffb74d', '#2ecc71'];
        return colors[Math.floor(Math.random() * colors.length)];
    }
    
    // 定时创建心形
    setInterval(createHeart, 2000);
    
    // 初始创建几个心形
    for (let i = 0; i < 3; i++) {
        setTimeout(createHeart, i * 1000);
    }
}

// 初始化three.js场景 (如果需要)
function initThreeJS() {
    // 检查页面是否包含canvas容器
    const canvasContainer = document.getElementById('threejs-container');
    if (!canvasContainer) return;
    
    // 创建场景
    const scene = new THREE.Scene();
    
    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, canvasContainer.clientWidth / canvasContainer.clientHeight, 0.1, 1000);
    
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
    renderer.setClearColor(0x000000, 0);
    canvasContainer.appendChild(renderer.domElement);
    
    // 添加粒子系统
    const particlesGeometry = new THREE.BufferGeometry();
    const particlesCount = 1000;
    
    const posArray = new Float32Array(particlesCount * 3);
    
    for (let i = 0; i < particlesCount * 3; i++) {
        posArray[i] = (Math.random() - 0.5) * 10;
    }
    
    particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
    
    // 创建粒子材质
    const particlesMaterial = new THREE.PointsMaterial({
        size: 0.02,
        color: 0xff6b8b
    });
    
    // 创建粒子网格
    const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
    scene.add(particlesMesh);
    
    // 相机位置
    camera.position.z = 5;
    
    // 动画循环
    function animate() {
        requestAnimationFrame(animate);
        
        particlesMesh.rotation.x += 0.0005;
        particlesMesh.rotation.y += 0.0005;
        
        renderer.render(scene, camera);
    }
    
    animate();
    
    // 响应窗口大小变化
    window.addEventListener('resize', () => {
        camera.aspect = canvasContainer.clientWidth / canvasContainer.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
    });
}

// 导入three.js库后初始化
if (typeof THREE !== 'undefined') {
    initThreeJS();
} else {
    // 如果three.js未加载，尝试延迟初始化
    setTimeout(() => {
        if (typeof THREE !== 'undefined') {
            initThreeJS();
        }
    }, 1000);
}